<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: html(~{::title}, ~{::pageStyles}, '智能诊断', ~{::#diagnosis-content}, ~{::pageScripts})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 智能诊断</title>
    
    <!-- 页面特定CSS -->
    <th:block th:fragment="pageStyles">
        <link rel="stylesheet" th:href="@{/css/pages/diagnosis.css}">
    </th:block>
</head>
<body>
    <!-- 诊断内容 -->
    <div id="diagnosis-content">
        <div class="diagnosis-container full-width">
            <!-- AI诊断聊天区域 -->
            <div class="ai-diagnosis-panel">
                <div class="panel-header">
                    <h2>智能医疗诊断助手</h2>
                    <div class="panel-actions">
                        <button class="btn-icon" id="helpGuideBtn" title="使用帮助">
                            <span data-icon="question-circle"></span>
                        </button>
                        <button class="btn-icon" id="clearChatBtn" title="清空对话">
                            <span data-icon="trash"></span>
                        </button>
                        <button class="btn-icon" id="exportReportBtn" title="导出诊断报告">
                            <span data-icon="download"></span>
                        </button>
                    </div>
                </div>
                <div class="chat-container">
                    <div class="chat-messages" id="chatMessages">
                        <!-- AI欢迎消息 -->
                        <div class="message ai-message">
                            <div class="message-avatar ai-avatar">
                                <img src="/static/images/ai-doctor-avatar.png" alt="AI医生" onerror="this.src='/static/images/default-ai-avatar.svg';this.onerror='';">
                            </div>
                            <div class="message-content">
                                <div class="message-text">
                                    <p>您好，我是智能医疗诊断助手。请描述您的症状，我将协助您进行初步诊断。</p>
                                </div>
                                <div class="message-time">今天 10:00</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="chat-input">
                        <div class="input-tools">
                            <button class="tool-btn" title="上传图像">
                                <span data-icon="image"></span>
                            </button>
                            <button class="tool-btn" title="上传检查报告">
                                <span data-icon="file-medical"></span>
                            </button>
                        </div>
                        <div class="input-container">
                            <textarea id="messageInput" placeholder="请描述您的症状或健康问题..." rows="2"></textarea>
                            <button class="send-btn" id="sendMessageBtn">
                                <span data-icon="send"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加帮助指南模态框 -->
        <div class="modal" id="helpGuideModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>智能诊断使用指南</h2>
                    <button class="close-btn" id="closeHelpModal">
                        <span data-icon="close"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="help-section">
                        <h3><span data-icon="info-circle"></span> 如何使用</h3>
                        <ul>
                            <li>清晰描述您的症状，包括持续时间和严重程度</li>
                            <li>提供相关的医疗病史和用药情况</li>
                            <li>可以上传相关的医学影像或检查报告</li>
                            <li>随时提问，AI会针对您的情况提供建议</li>
                        </ul>
                    </div>
                    <div class="help-section">
                        <h3><span data-icon="warning"></span> 重要提示</h3>
                        <p>AI诊断助手提供的建议仅供参考，不能替代专业医生的诊断和治疗。如有紧急情况，请立即就医。</p>
                    </div>
                    <div class="help-section">
                        <h3><span data-icon="shield"></span> 隐私保护</h3>
                        <p>您的健康信息受到严格保护，不会泄露给无关第三方。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="confirmHelpGuide">我知道了</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="pageScripts">
        <script th:src="@{/js/utils/modal.js}"></script>
        <script th:src="@{/js/pages/diagnosis.js}"></script>
    </th:block>
</body>
</html> 